import { formatEnumForSelect } from '@/views/enum/common';
import { IFormConfig, IFormData, IFormItemConfig, IJlFormInstance } from '@jl/element-plus';
import { ref } from 'vue';
import { GetProListByMuCond } from '@/api/project';
import { useRequest } from '@jl/common/composable';

const { run: proListRun, data: proData } = useRequest<any, any>(GetProListByMuCond, []);

const proListData = computed(() => {
  return proData.value.list || [];
});

export function create() {
  const formRef = ref<IJlFormInstance>();
  const formConfig: IFormConfig = { gutter: 24, labelWidth: 90 };
  const formData = ref<IFormData>({
    fileResName: '',
    projectId: '',
    resUrl: '',
    matDesp: '',
    longitude: '',
    latitude: '',
    xRotate: '',
    yRotate: '',
    zRotate: '',
  });

  function validateNumber(rule: any, value: any, callback: any) {
    if (value && isNaN(value)) {
      callback(new Error(rule.message));
    } else {
      callback();
    }
  }
  function validateRotateNumber(rule: any, value: any, callback: any) {
    if (value && isNaN(value)) {
      callback(new Error('请输入数字'));
    } else {
      if (value && (value > 359.99 || value < -359.99)) {
        callback(new Error('请输入范围在-359.99~359.99之间的数字'));
      }
      callback();
    }
  }

  const formItemConfig = ref<IFormItemConfig>([
    {
      type: 'input',
      key: 'fileResName',
      label: '场景名称',
      span: 24,
      maxLength: '50',
      placeholder: '请输入资源名称',
      emits: new Set(['change']),
      rules: [
        {
          required: true,
          message: '请输入资源名称',
        },
      ],
    },
    {
      type: 'select',
      key: 'projectId',
      label: '所属项目',
      span: 24,
      placeholder: '请选择',
      emits: new Set(['change']),
      options: [],
      // rules: [
      //   {
      //     required: true,
      //     message: '请选择项目',
      //   },
      // ],
    },
    {
      type: 'textarea',
      maxLength: '200',
      key: 'matDesp',
      label: '场景描述',
      placeholder: '简述场景描述，不超过200个字符',
      span: 24,
    },
    {
      type: 'slot',
      slotName: 'slotAddress',
      key: 'resUrl',
      label: '场景地址',
      span: 24,
    },
    {
      type: 'slot',
      slotName: 'slotResUrl',
      key: 'resUrl',
      label: '配置模版',
      span: 24,
    },
    // {
    //   type: 'input',
    //   key: 'longitude',
    //   label: '经度',
    //   placeholder: '',
    //   span: 12,
    //   rules: [
    //     {
    //       message: '请输入经度',
    //       validator: validateNumber,
    //     },
    //   ],
    // },
    // {
    //   type: 'input',
    //   key: 'latitude',
    //   label: '纬度',
    //   placeholder: '',
    //   span: 12,
    //   rules: [
    //     {
    //       message: '请输入纬度',
    //       validator: validateNumber,
    //     },
    //   ],
    // },
  ]);

  watch(
    () => proListData.value,
    () => {
      formItemConfig.value[1].options = proListData.value.map((item: any) => {
        return {
          label: item.projectName,
          value: item.projectId,
        };
      });
    },
    {
      deep: true,
    }
  );

  return {
    formRef,
    formConfig,
    formData,
    formItemConfig,
    proListRun,
    validateRotateNumber,
  };
}
